<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" />
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<view class="shop">
				<view class="factory flex justify-between align-center" style="padding:26rpx 0 ;">
					<view class="flex align-center">
						<image src="../../static/plate/room.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;margin-left: 15rpx;">重庆实木制造工作室</text>
					</view>
					<image src="../../../static/me/right.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
				</view>
				<uni-swipe-action class="shopPlate" ref="swipeAction" v-for="(item,index) in plateData" :key="index">
					<uni-swipe-action-item :right-options="options"
						style="border-bottom: 1px solid rgba(30,30,30,0.1);">
						<!-- @change="swipeChange($event, index)" @click="swipeClick($event, index)" -->
						<view style="width:100%;" class="flex">
							<checkbox-group @change="selected(item)">
								<checkbox style="transform:scale(0.8);" :checked="checked" class="checkbox" />
							</checkbox-group>
							<view>
								<view class="flex" style="padding: 30rpx 0;">
									<view style="position: relative;">
										<image style="width:152rpx;height:152rpx;border-radius:12rpx;" :src="item.image"
											mode="">
										</image>
										<image v-if="item.environmentalProtection == 0" class="imageIco"
											src="../../static/plate/7816.png" mode=""></image>
										<image class="imageIco" v-if="item.environmentalProtection == 1"
											src="../../static/plate/8374.png" mode=""></image>
										<image class="imageIco" v-if="item.environmentalProtection == 2"
											src="../../static/plate/8375.png" mode=""></image>
									</view>
									<view class="flex justify-between" style="width:100%;margin-left: 20rpx;">
										<view>
											<view style="font-size: 32rpx;color: #333333;margin:12rpx 0;">{{item.name}}
											</view>
											<view class="flex" style="margin:12rpx 0 ;">
												<image style="width:138rpx;height:40rpx;margin-right:10rpx;"
													src="../../static/plate/attestation.png" mode="">
												</image>
												<view
													style="font-size: 20rpx;color: #F84949FF;margin-right:10rpx;border-radius: 10rpx;border: 1rpx solid #F84949;line-height: 32rpx;padding:2rpx 5rpx;">
													{{item.lable}}
												</view>
											</view>
											<view
												style="margin:12rpx 0;color: rgba(30,30,30,0.3);font-size: 24rpx;font-weight: 400;">
												{{item.number}}+人购买过
											</view>
										</view>
										<view style="margin: auto 20rpx;text-align: right;">
											<view
												style="font-size: 40rpx;color: #1E1E1E;font-family: Rubik-Medium, Rubik;font-weight: 500;">
												￥{{item.guidePrice}}</view>
											<view style="font-size: 24rpx;font-weight: 400;color: #1E1E1E;">
												元/平方米
											</view>
										</view>
									</view>
								</view>
								<view class="model">
									型号：{{item.model}} 规格：{{item.specification}}
								</view>
								<view class="flex justify-between align-center" style="margin: 30rpx 0;">
									<text style="color: rgba(30,30,30,0.3);">数量</text>
									<view class="detail-right flex justify-between">
										<text class="subtract" @click="reduce(item)">—</text>
										<text class="num">{{item.num}}</text>
										<text @click="add(item)" class="add">+</text>
									</view>
								</view>
							</view>
						</view>

					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</mescroll-body>
		<!-- 结算 -->
		<view class="settlement flex justify-between align-center">
			<checkbox-group @change="selectgoods()">
				<checkbox style="transform:scale(0.8);" :checked="allchecked" />
				<view style="font-size: 26rpx;font-weight: 500;">
					全选
				</view>
			</checkbox-group>
			<view>
				<view style="font-size: 44rpx;font-family: Rubik-Medium, Rubik;font-weight: 500;color: #F84949;">
					￥112,560.00
				</view>
				<view class="over" @tap="viewOver()">
					查看全部
				</view>
			</view>
			<view class="settled" @click="totalPrice">
				立即结算({{totalNum}})
			</view>
		</view>
		<!-- 查看全部订单 -->
		<uni-popup id="popup" ref="popup" type="bottom" :animation="true">
			<scroll-view class="uni_popup" scroll-y="true"
				style="padding: 0 30rpx 30rpx 30rpx;background-color: #fff;height: 952rpx;border-radius: 40rpx 40rpx 0 0;">
				<view class="flex" style="padding: 30rpx 0;flex-wrap: wrap;">
					<view v-for="(item,index) in plateData" :key="index"
						style="width: 230rpx;height: 256rpx;text-align: center;">
						<view style="position: relative;">
							<image style="width:152rpx;height:152rpx;border-radius:12rpx;" :src="item.image" mode="">
							</image>
							<image class="imageIco" v-if="item.environmentalProtection == 0" style="right: 50rpx;"
								src="../../static/plate/7816.png" mode="">
							</image>
							<image class="imageIco" v-if="item.environmentalProtection == 1" style="right: 50rpx;"
								src="../../static/plate/8374.png" mode=""></image>
							<image class="imageIco" v-if="item.environmentalProtection == 2" style="right: 50rpx;"
								src="../../static/plate/8375.png" mode=""></image>
						</view>
						<view style="font-size: 36rpx;font-family: Rubik-Medium, Rubik;font-weight: 500;">
							￥{{item.guidePrice}}
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				config: {
					title: '购物车',
					color: '#111111',
					backgroundColor: [1, '#F0F3FA'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				plateData: [{
						image: '../../static/plate/plate.png',
						environmentalProtection: 0,
						name: '刨花板',
						guidePrice: '560',
						lable: '星级产品',
						number: '600+',
						model: '桃木色(EC-802)',
						specification: '1250*545*600',
						num: '1',
						flag: true
					},
					{
						environmentalProtection: 1,
						image: '../../static/plate/plate.png',
						name: '刨花板',
						guidePrice: '560',
						lable: '星级产品',
						number: '600+',
						model: '桃木色(EC-802)',
						specification: '1250*545*600',
						num: '1',
						flag: true
					}
				],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#F84949FF',
						color: '#FFFFFFFF'
					}
				}],
				//全选是否选中
				checked: false,
				allchecked: false
			}
		},
		created() {

		},
		methods: {
			// 查看全部
			viewOver() {
				this.$refs.popup.open()
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {

			},
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			swipeClick(e, index) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								this.swipeList.splice(index, 1);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showToast({
						title: `点击了删除按钮`,
						icon: 'none'
					});
				}
			},
			add(item) {
				let num = item.num
				num += 1
				item.num = num
				console.log('顶顶顶', item.num)
			},
			reduce(item) {
				let num = item.num
				if (num > 1) {
					num -= 1
				} else if (num = 1) {
					uni.showToast({
						icon: 'none',
						title: "该宝贝不能减少了哟~"
					})
				}
				item.num = num
			},
			totalNum() {
				totalNum = 1;
				this.plateData.map(item => {
					item.flag ? totalNum += item.num : totalNum += 0
				})
				return totalNum
			},
			// 全选
			selectgoods() {
				this.allchecked = !this.allchecked
				if (this.checked.length == 0) {
					this.allchecked = false
				}
				if (this.allchecked) {
					this.plateData.map(item => {
						this.checked = true
						item.flag = true
					})
				} else {
					this.checked = false
					this.plateData.map(item => {
						item.flag = false
					})
				}
				let totalPrice = 0;
				this.plateData.map(item => {
					item.flag ? totalPrice += item.num * item.guidePrice : totalPrice += 0
				})
			},
			// 选中
			selected(item) {
				item.flag = !item.flag
				if (this.checked.length) {
					this.allchecked = true
				}

				if (!item.flag) {
					this.allchecked = false
				} else {
					const a = this.plateData.forEach((item) => {
						return item.flag === true
					})
					if (a) {
						this.allchecked = true
					} else {
						this.allchecked = false
					}
				}

			},
			totalPrice() {
				this.$tools.goPageNoAuth('./shoppingCartsDetail')
			}
		}
	}
</script>

<style scoped>
	.detail-right {
		width: 228rpx;
		height: 64rpx;
		line-height: 64rpx;
		color: rgba(30, 30, 30, 0.3);
		border-radius: 8rpx;
		border: 2rpx solid rgba(30, 30, 30, 0.1);
	}

	.num {
		font-size: 32rpx;
		font-family: Rubik-Bold, Rubik;
		font-weight: bold;
		color: #1E1E1E;
		width: 88rpx;
		text-align: center;
		border-left: 2rpx solid rgba(30, 30, 30, 0.1);
		border-right: 2rpx solid rgba(30, 30, 30, 0.1);
	}

	.subtract,
	.add {
		font-size: 42rpx;
		width: 64rpx;
		height: 64rpx;
		text-align: center;
	}

	.checkbox {
		margin: 80rpx 20rpx 0 20rpx;
	}

	.shop {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx;
	}

	.shopPlate {
		border-top: 1rpx solid rgba(30, 30, 30, 0.1);
	}

	.imageIco {
		width: 78rpx;
		height: 32rpx;
		position: absolute;
		right: 15rpx;
		bottom: 15rpx;
	}

	.model {
		width: 510rpx;
		height: 46rpx;
		text-align: center;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 8rpx;
		line-height: 46rpx;
		font-size: 24rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: rgba(30, 30, 30, 0.3);
	}

	.settled {
		width: 206rpx;
		height: 72rpx;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: Noto Sans SC-Medium, Noto Sans SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
		margin: auto 0;
	}

	.settlement {
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		width: 100%;
		margin: auto 0;
		background-color: #FFFFFF
	}

	.over {
		background: rgba(30, 30, 30, 0.1);
		border-radius: 20rpx;
		font-size: 24rpx;
		width: 128rpx;
		text-align: center;
		line-height: 40rpx;
		margin-top: 20rpx;
	}

	.uni-list-cell {
		justify-content: flex-start
	}
</style>
